import React from 'react';
import { connect } from 'dva';
import { Button, Table, Form, Input, Popconfirm,DatePicker,Menu,Dropdown, Icon, Select,TreeSelect,   } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;
const RangePicker = DatePicker.RangePicker;
import { baseUrl,imgUrl } from '../../config/system';

import AddShelfModal from '../../components/shelf/up/AddShelfModal';
import ShelfUpViewModal from '../../components/shelf/up/ShelfUpViewModal';
import ShelfUpEditModal from '../../components/shelf/up/ShelfUpEditModal';
// import InstockModal from '../../components/shelf/InstockModal';
import InstockEditModal from '../../components/shelf/up/InstockEditModal';
import SecondShelfModal from '../../components/shelf/up/SecondShelfModal';

function ShelfUp({ dispatch, shelfUp, loading, form }) {

    const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
    const { currentItem, modalVisible, assetList,modalType,detailList,instockModalType ,viewDetailList,secondModalVisible} = shelfUp

    const columns = [{
        title: '申请单号',
        dataIndex: 'id_',
        key: 'id_',
        width: 120,
    },{
        title: '所在机房',
        dataIndex: 'roomName',
        key: 'roomName',
        width: 100,
    },{
        title: '设备型号',
        dataIndex: 'modelNames',
        key: 'modelNames',
        width: 120,
    }
    // ,{
    //     title: '所在机柜',
    //     dataIndex: 'rackNames',
    //     key: 'rackNames',
    //     width: 80,
    // }
    ,{
        title: '预计执行时间',
        dataIndex: 'executeTime',
        key: 'executeTime',
        width: 100,
    },{
        title: '指定操作人',
        dataIndex: 'userName',
        key: 'userName',
        width: 80,
    },{
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 60,
        render: (value, row, index) => {
            return (
                value==1?"未完成":value==2?"处理中":value==3?"已完成":''
            )
        }
    },{
        title: '上架单类型',
        dataIndex: 'type',
        key: 'type',
        width: 60,
        render: (value, row, index) => {
            return (
                value==1?"普通上架":value==2?"迁移上架":''
            )
        }
    }
    // ,{
    //     title: '下载附件',
    //     dataIndex: 'filePath',
    //     key: 'filePath',
    //     width: 60,
    //     render: (text, record) => (
    //         <span>
    //          <a href={imgUrl+"/"+record.filePath}>下载附件</a>
    //         </span>
    //     ),
    // }
    ,{
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 120,
    },{
        title: '操作',
        key: 'operation',
        width: 80,
        render: (text, record) => (
            <span>
            {(record.status==1)?(
              <span>
                <Dropdown overlay={
                    <Menu>
                        <Menu.Item>
                            <a onClick={onEditPutOnDetail.bind(null, record.id_)}>确认上架</a>
                        </Menu.Item>
                        <Menu.Item>
                            <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id_)}>
                            <a>删除</a>
                            </Popconfirm>
                        </Menu.Item>         
                    </Menu>
                    }>
                    <a className="ant-dropdown-link">
                     操作<Icon type="down" />
                    </a>
                </Dropdown>
                <span className="ant-divider" />
                <a onClick={onViewItem.bind(null, record.id_)}>查看</a>
              </span>
            ):<a onClick={onViewItem.bind(null, record.id_)}>查看</a>}
            </span>
        ),
    }];

    const pagination = {
        current:shelfUp.current,
        pageSize:shelfUp.currentSize,
        total: shelfUp.total,
        showSizeChanger: true,
        showTotal: (total => '共' + shelfUp.total + '条'),
        onShowSizeChange(current, size) {
            dispatch({
                type: 'shelfUp/queryList',
                payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
            });
        },
        onChange(current) {
            dispatch({
                type: 'shelfUp/queryList',
                payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':shelfUp.currentSize} },
            });
        },
    };
    function deleteHandler(id) {
        dispatch({
        type: 'shelfUp/remove',
        payload: {id:id,search:{...getFieldsValue()}},
        });
    }
    const editHandler = (id, values) => {
        dispatch({
            type: 'shelfUp/edit',
            payload: { id, ...values },
        });
    }
    const submitHandle = () => {
        dispatch({
            type: 'shelfUp/queryList',
            payload: { ...getFieldsValue() },
        });
    }

       //下载报表文件
    const onUploadFile = (filePath,fileName) => {
        let values = {filePath:imgUrl+"/"+filePath,fileName:fileName};
        let param = JSON.stringify(values);
        param = encodeURIComponent(param);
        window.open(baseUrl+"/report/downLoadFile?param="+param);
    }

    function handleClear(){
      form.resetFields();
    }

    const addHandler = () => {
        dispatch({
        type: 'shelfUp/qryById',
            payload: {
                modalType: 'create',
            },
        })
    }
    //查看上架详情
    const onViewItem = (id) => {
        dispatch({
            type: 'shelfUp/onViewItem',
            payload:id,
        })
    }

    // 弹出要上架的列表
    const onEditPutOnDetail = (id) => {
        dispatch({
            type: 'shelfUp/onEditPutOnDetail',
            payload:id,
        })
    }

    // 编辑上架信息
    const putOnHandle = (values) => {
        for(var i=0;i<detailList.length;i++){
            if(values.assetId==detailList[i].id_){
                for(var j=0;j<shelfUp.rackList.length;j++){
                     var curr = shelfUp.rackList[j];
                     if(values.rackId==curr.id_){
                        detailList[i].rackName=curr.assetName;
                     }
                }
                detailList[i].assetId =detailList[i].id_;
                detailList[i].rackId =values.rackId;
                detailList[i].startU =values.start;
            }
        }
        dispatch({
            type: 'shelfUp/updateDetailList',
            payload: detailList,
        })
    }

     // 在查看信息里修改上架信息
    const editPutOnHandle = (values) => {
        for(var i=0;i<viewDetailList.length;i++){
            if(values.assetId==viewDetailList[i].id_){
                for(var j=0;j<shelfUp.rackList.length;j++){
                     var curr = shelfUp.rackList[j];
                     if(values.rackId==curr.id_){
                        viewDetailList[i].rackName=curr.assetName;
                     }
                }
                viewDetailList[i].assetId =viewDetailList[i].id_;
                viewDetailList[i].rackId =values.rackId;
                viewDetailList[i].rackId_ =values.rackId;
                viewDetailList[i].startU =values.start;
            }
        }
        dispatch({
            type: 'shelfUp/updateViewDetailList',
            payload: viewDetailList,
        })
    }

    const modalProps = {
        item: shelfUp.currentItem,
        visible: modalVisible,
        type: modalType,
        maskClosable: false,
        id:shelfUp.pullOffId,
        assetList:assetList,
        dispatch: dispatch,
        userList:shelfUp.userList,
        filePath:shelfUp.filePath,
        assetType:shelfUp.assetTypeTree,
        detailList:detailList,
        roomList:shelfUp.roomList,
        assetBrandList:shelfUp.assetBrandList,
        confirmLoading: loading,
        title: '新增上架单',
        wrapClassName: 'vertical-center-modal',
        newKey : shelfUp.newKey,
        onOk (data) {
            dispatch({
                type: `shelfUp/addShelfUp`,
                payload: data,
            })
        },
        onCancel () {
            dispatch({
                type: 'shelfUp/hideModal',
            })
        },
        onCreateDetail (data) {
            dispatch({
                type: 'shelfUp/showCreateDetailModal',
                payload: data,
            })
        },
        //添加上架单弹出上架操作页面
        onOpenInstock(data) {
            dispatch({
                type: 'shelfUp/qryAssetById',
                payload: data,
            })
        },

    }

    const viewModalProps = {
        item: shelfUp.viewItem,
        visible: shelfUp.viewModalVisible,
        dispatch: dispatch,
        maskClosable: false,
        viewDetailList:shelfUp.viewDetailList,
        confirmLoading: loading,
        title: '查看上架单详情',
        wrapClassName: 'vertical-center-modal',
        newKey : shelfUp.newKey,
        onCancel () {
            dispatch({
                type: 'shelfUp/hideViewModal',
            })
        },
    }

    const editModalProps = {
        item: shelfUp.viewItem,
        visible: shelfUp.editModalVisible,
        maskClosable: false,
        dispatch: dispatch,
        viewDetailList:shelfUp.viewDetailList,
        confirmLoading: loading,
        title: '确认上架',
        wrapClassName: 'vertical-center-modal',
        newKey : shelfUp.newKey,
        //确认修改上架
        onOk (data) {
            dispatch({
                type: `shelfUp/editShelfUp`,
                payload: data,
            })
        },
        onCancel () {
            dispatch({
                type: 'shelfUp/hideEditModal',
            })
        },
     }

    // const instockModalProps = {
    //     item: instockModalType === 'createInstock' ? {} : shelfUp.instockItem,
    //     visible: shelfUp.instockModalVisible,
    //     type: instockModalType,
    //     putOnHandle:putOnHandle,
    //     rackList:shelfUp.rackList,
    //     maskClosable: false,
    //     dispatch: dispatch,
    //     confirmLoading: loading,
    //     title: instockModalType === 'createInstock' ? '' : <div style={{fontSize:'16px'}}><span>设备名称:{shelfUp.instockItem.assetName}</span><span style={{paddingLeft:'15px'}}>型号:{shelfUp.instockItem.modelName}</span></div>,
    //     wrapClassName: 'vertical-center-modal',
    //     newKey : shelfUp.newKey,
    //     onCancel () {
    //         dispatch({
    //             type: 'shelfUp/hideInstockModal',
    //         })
    //     },
    // }

    const instockEditModalProps = {
        item: instockModalType === 'createInstock' ? {} : shelfUp.instockItemEdit,
        visible: shelfUp.instockEditModalVisible,
        type: instockModalType,
        editPutOnHandle:editPutOnHandle,
        rackList:shelfUp.rackList,
        maskClosable: false,
        dispatch: dispatch,
        confirmLoading: loading,
        title: instockModalType === 'createInstock' ? '' : <div style={{fontSize:'16px'}}><span>设备名称:{shelfUp.instockItemEdit.assetName}</span><span style={{paddingLeft:'15px'}}>型号:{shelfUp.instockItemEdit.modelName}</span></div>,
        wrapClassName: 'vertical-center-modal',
        newKey : shelfUp.newKey,
        onCancel () {
            dispatch({
                type: 'shelfUp/hideInstockEditModal',
            })
        },
    }

    const secondModalProps = {
        item: shelfUp.assetItem,
        visible: secondModalVisible,
        assetList:assetList,
        userList:shelfUp.userList,
        assetType:shelfUp.assetTypeTree,
        detailList:detailList,
        roomList:shelfUp.roomList,
        assetBrandList:shelfUp.assetBrandList,
        assetModelList:shelfUp.assetModelList,
        rackList:shelfUp.rackList,
        assetCurrent:shelfUp.assetCurrent,
        assetCurrentSize:shelfUp.assetCurrentSize,
        assetTotal:shelfUp.assetTotal,
        maskClosable: false,
        dispatch: dispatch,
        confirmLoading: loading,
        title: '新增明细',
        wrapClassName: 'vertical-center-modal',
        newKey : shelfUp.newKey,
        onCancel () {
            dispatch({
                type: 'shelfUp/hideSecondModal',
            })
        },
    }


    let roomsList = [];
    for (let i = 0; i < shelfUp.roomList.length; i++) {
      roomsList.push(<Option key={shelfUp.roomList[i].id_}>{shelfUp.roomList[i].name}</Option>);
    }

    return (
        <div style={{backgroundColor:'#fff'}}>
          <div style={{minHeight:'100%'}}>
              <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px'}}>
                  <Form layout="inline" >
                    <FormItem>
                            {
                            getFieldDecorator('roomId')(
                             <Select
                                  showSearch
                                  style={{ width: 200 }}
                                  placeholder="选择机房"
                                  optionFilterProp="children"
                              >
                                 <Option value="">全部</Option>
                                  {roomsList}
                              </Select>
                            )
                         }
                    </FormItem>
                    <FormItem>
                            {getFieldDecorator('userName')(
                                <Input type="text" placeholder="操作人" style={{ width:'130px' }} />
                            )}
                    </FormItem>
                    <FormItem>
                           {getFieldDecorator('executeTime')(
                                <RangePicker   style={{ width:'250px' }}  format="YYYY-MM-DD" />
                            )}
                    </FormItem>


                    <FormItem>
                        {getFieldDecorator('status')(
                            <Select
                                showSearch
                                style={{ width: 130 }}
                                placeholder="选择状态"
                                optionFilterProp="children"
                        >
                              <Option value="">全部</Option>
                              <Option value="1">未完成</Option>
                              <Option value="2">处理中</Option>  
                              <Option value="3">已完成</Option>
                            </Select>
                        )}
                    </FormItem>
                    <FormItem>
                        <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                    </FormItem>
                    <FormItem>
                        <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                    </FormItem>

                    <div style={{marginTop:'-40px',textAlign:'right',paddingRight:'10px'}}>
                        <FormItem>
                            <Button type="primary" size='large' onClick={addHandler}>新增上架单</Button>
                        </FormItem>
                    </div>

                </Form>
            </div>
            <div style={{width:'100%',padding:"20px 20px",}}>
                <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={shelfUp.list} pagination={pagination}
                />
            </div>
            </div>

            <AddShelfModal {...modalProps} />
            <ShelfUpViewModal {...viewModalProps} />
            <ShelfUpEditModal {...editModalProps} />
            {/* <InstockModal {...instockModalProps} /> */}
            <InstockEditModal {...instockEditModalProps} />
            <SecondShelfModal {...secondModalProps} />
        </div>
    );
}

function mapStateToProps(state) {
  return { shelfUp : state.shelfUp,loading:state.loading.models.shelfUp};
}

ShelfUp = Form.create()(ShelfUp);

export default connect(mapStateToProps)(ShelfUp);
